<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3795987_3kclvz57zs.css">
    <link rel="shortcut icon" href="//y.qq.com/favicon.ico?max_age=2592000">

    <link rel="stylesheet" href="./css/musicPlay.css">
    <title>歌手列表 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>

</head>

<body>
    <audio class="music"></audio>
    <div class="logo">
        <a href="../index.html"></a>
    </div>
    <div class="login">
        <a href="">登录</a>
        <a href="">设置</a>
    </div>


    <!-- 播放列表+图片歌词 -->
    <div class="play">
        <!-- 播放列表 -->
        <div class="playlist">
            <div class="playlist-title">
                <a href=""><i class="iconfont icon-aixin"></i>收藏</a>
                <a href=""><i class="iconfont icon-tianjia"></i>添加到</a>
                <a href=""><i class="iconfont icon-xiazai"> </i>下载</a>
                <a href=""><i class="iconfont icon-shanchu1"></i>删除</a>
                <a href=""><i class="iconfont icon-qingkong"></i>清空列表</a>
            </div>
            <div class="lists">
                <div class="list">
                    <div class="check"><i class="iconfont icon-duigoux"></i></div>
                    <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;歌曲</a>
                    <a href="#">歌手</a>
                    <a href="#">时长</a>
                </div>
                <div class="list">
                    <div class="check"><i class="iconfont icon-duigoux"></i></div>
                    <a href="#">1 &nbsp; 浮沉<i class="iconfont icon-bofang"></i></a>
                    <a href="#">童珺</a>
                    <a href="#">03:13</a>
                </div>

                <div class="list">
                    <div class="check"><i class="iconfont icon-duigoux"></i></div>
                    <a href="#">2 &nbsp; 此身<i class="iconfont icon-bofang"></i></a>
                    <a href="#">张远/王者荣耀</a>
                    <a href="#">04:12</a>
                </div>
                <div class="list">
                    <div class="check"><i class="iconfont icon-duigoux"></i></div>
                    <a href="#">3 &nbsp; 毕业记<i class="iconfont icon-bofang"></i></a>
                    <a href="#">Lili Ghost小鬼/张碧晨</a>
                    <a href="#">02:57</a>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="tupian">
                <div class="tupian1"></div>

                <div class="tupian2"></div>
            </div>
            <div class="xinxi">
                <p>歌曲名: 浮沉</p>
                <p>歌手: 童珺</p>
                <p>专辑: 浮沉</p>
            </div>
            <div class="gechi">
                <ul>
                    <li>编曲: 宋易名</li>
                    <li>制作人:曹志贤</li>
                    <li>和声设计: 郝仁奇</li>
                </ul>
            </div>

        </div>
    </div>
    <!-- 底部 -->
    <div class="foot">
        <i class="iconfont icon-shangyiqu"></i>
        <i class="iconfont icon-bofang1"></i>
        <i class="iconfont icon-xiayiqu"></i>
        <div class="jingdutiao">
            <div>
                <p class="mname"></p>
                <p><span class="time">00:00</span> / <span class="time-z">00:00</span></p>
            </div>
            <div class="jdt">
                <div class="after1"></div>
                <div class="before1"></div>

            </div>
        </div>
        <i class="iconfont icon-caozuo-xunhuan1"></i>
        <i class="iconfont icon-aixin"></i>
        <i class="iconfont icon-xiazai"></i>
        <i class="iconfont icon-xiaoxi"></i>
        <i class="iconfont icon-yangshengqi"></i>
        <i></i>
    </div>

    <script>
        //秒换分
        function getMm(s) {
           
            if (s < 10) {
                return `0${0}:0${parseInt(s)}`

            } else if (s < 60) {
                return `0${0} : ${parseInt(s)}`

            } else {
                if (s % 60 < 10) {
                    return `0${parseInt(s/60)} : 0${parseInt(s % 60)}`
                } else {
                    return `0${parseInt(s/60)} : ${parseInt(s % 60)}`
                }

            }
        }


        // function palyM() {
        //     let icon_bofang1 = document.querySelector(".icon-bofang1")
        //     if (icon_bofang1.className === "iconfont icon-bofang1") {

        //         icon_bofang1.classList.add("icon-24gl-pause2")
        //         icon_bofang1.classList.remove("icon-bofang1")
        //     } else {

        //         icon_bofang1.classList.add("icon-bofang1")
        //         icon_bofang1.classList.remove("icon-24gl-pause2")
        //     }
        // }

function srcH(str){
    return str.replace("./music/", "").replace(".mp3", "")
}




        //获取音乐对象
        let music = document.querySelector(".music")
        let time = document.querySelector(".time")
        let time_z = document.querySelector(".time-z")
        let mname=document.querySelector(".mname")
        //播放的音乐的数组
        musicSrc = [
           
        {
                src: "./music/毕业记.mp3",
                time_z: 177.2253
            },
            {
                src: "./music/此身.mp3",
                time_z: 253
            },
            {
                src: "./music/童珺.mp3",
                time_z: 194
            }

        ]

        music.src = musicSrc[2].src;
        time_z.innerHTML= getMm(musicSrc[2].time_z)
        mname.innerHTML=srcH(musicSrc[2].src)
        console.log(music);
        
        
     
       
        

// console.log(getMm(music.currentTime));

        let checks = document.querySelectorAll(".check>i")
        let checkdiv = document.querySelectorAll(".check")
        // console.log(checks);
        for (let i = 0; i < checks.length; i++) {
            checkdiv[i].addEventListener("click", () => {
                if (checks[i].style.opacity == "0" || checks[i].style.opacity == "") {
                    checkdiv[i].style.border = "1px solid rgba(255,255,255,1)";
                    checks[i].style.opacity = 1
                } else {
                    checkdiv[i].style.border = "1px solid rgba(255,255,255,.15)";

                    checks[i].style.opacity = 0
                }

            })
        }

        let icon_bofang1 = document.querySelector(".icon-bofang1")
        // console.log(icon_bofang1);




        //********单击播放按钮变成暂停按钮
        icon_bofang1.addEventListener("click", () => {

            if (icon_bofang1.className === "iconfont icon-bofang1") {

                music.play()
                //页面上面的播放按钮


                //页面下面的播放按钮
                icon_bofang1.classList.add("icon-24gl-pause2")
                icon_bofang1.classList.remove("icon-bofang1")
            } else {
                music.pause()
                //页面下面的播放按钮
                icon_bofang1.classList.add("icon-bofang1")
                icon_bofang1.classList.remove("icon-24gl-pause2")
            }

        })
        //*****************单击播放进度条开始播放音乐



        //     music.currentTime=30


       
        let jdt = document.querySelector(".before1")
        let jdt_d = document.querySelector(".after1")

        let m = 0

        icon_bofang1.addEventListener("click", () => {

            //解决延迟3秒的问题和拖动进度条就没有延迟问题但是会后退一秒的问题




            // console.log();
            let play = setInterval(() => {
                // console.log(music.currentTime);        
                // 判断按钮是播放还是暂停
                if (icon_bofang1.className === "iconfont icon-24gl-pause2") {
                    // console.log(s/194*100+"%");
                    if (music.currentTime > 194) {
                        music.currentTime = 0
                        icon_bofang1.click()
                        m = 0
                    }
                    console.log("开始的s", music.currentTime);
                    jdt.style.width = music.currentTime / 194 * 100 + "%"
                    jdt_d.style.left = music.currentTime / 194 * 100 + "%"
                    // 调用秒换算分函数
                    time.innerHTML = getMm(music.currentTime)
                    console.log(music.currentTime);
                } else {
                    clearInterval(play)


                }

                //秒换分钟

                m = parseInt(music.currentTime / 60)



            }, 1000)

            // s=s<=0?0:s-3
        })

        // console.dir(jdt);
        //*******************拖动鼠标进度条

        let jdt_w = document.querySelector(".jdt")

        let jingdutiao = document.querySelector(".jingdutiao")
        let tdjdt = (e) => {
            //鼠标移动时更改进度条
            if (e.pageX <= jdt_w.offsetLeft + jdt_w.offsetWidth && e.pageX >= jdt_w.offsetLeft) {
                jdt.style.width = e.pageX - jdt_w.offsetLeft + "px"
                jdt_d.style.left = e.pageX - jdt_w.offsetLeft + "px"
                time.innerHTML = getMm(parseInt(jdt.offsetWidth / (jdt_w.offsetWidth - 10) * 194))

                if (parseInt(jdt.offsetWidth / (jdt_w.offsetWidth - 10) * 194 / 60) >= 1) {
                    m = parseInt(jdt.offsetWidth / (jdt_w.offsetWidth - 10) * 194 / 60)
                }
                music.currentTime = jdt.offsetWidth / (jdt_w.offsetWidth - 10) * 194

                console.log("拖动的s", music.currentTime);

            }
        }
        jingdutiao.addEventListener("mousedown", () => {
            music.pause()
            icon_bofang1.classList.add("icon-bofang1")
            icon_bofang1.classList.remove("icon-24gl-pause2")
            jingdutiao.addEventListener("mousemove", tdjdt)
        })
        jingdutiao.addEventListener("mouseup", () => {
            jingdutiao.removeEventListener("mousemove", tdjdt)
        })

        // console.dir(music.src);

        //********************************下一曲
        let musicIndex = 0
        let xiayiqu = document.querySelector(".icon-xiayiqu")
        xiayiqu.addEventListener("click", () => {
            // icon_bofang1.classList.remove("icon-24gl-pause2")
            // icon_bofang1.classList.add("icon-bofang1")
            if (musicIndex <= musicSrc.length) {
                if (musicIndex == musicSrc.length) {
                    musicIndex = 0
                }
                music.src = musicSrc[musicIndex].src;
                music.currentTime = 0
              
                time_z.innerHTML= getMm(musicSrc[musicIndex].time_z)
                mname.innerHTML=srcH(musicSrc[musicIndex].src)
                icon_bofang1.click()
                    if (icon_bofang1.className === "iconfont icon-bofang1") {
                        music.play()
                    icon_bofang1.classList.add("icon-24gl-pause2")
                    icon_bofang1.classList.remove("icon-bofang1")
                } 
            }

            musicIndex++
        })
        let shangyiqu = document.querySelector(".icon-shangyiqu")
        shangyiqu.addEventListener("click", () => {
            icon_bofang1.classList.remove("icon-24gl-pause2")
            icon_bofang1.classList.add("icon-bofang1")
            if (musicIndex <= musicSrc.length) {
              
                if (musicIndex == 0) {
                    
                    musicIndex = musicSrc.length - 1
                }




                music.src = musicSrc[musicIndex].src;
                music.currentTime = 0
               
                time_z.innerHTML= getMm(musicSrc[musicIndex].time_z)
                mname.innerHTML=srcH(musicSrc[musicIndex].src)
          
            icon_bofang1.click()
                  if (icon_bofang1.className === "iconfont icon-bofang1") {
                    music.play()
                    icon_bofang1.classList.add("icon-24gl-pause2")
                    icon_bofang1.classList.remove("icon-bofang1")
                }
           }





            musicIndex--
        })
//********************************上一曲
        //播放音乐
        // let music=document.querySelector(".music")
    //     music.autoplay=true
    //     music.currentTime=30
    // console.dir(music.autoplay);
    //     setTimeout(()=>{
    //         console.dir(music.currentTime);

    //     },3000)

    </script>
</body>

</html>